<template>
  <div class="home-page-content">
    <h3>预警时间设置</h3>
    <div class="mt-20">
      <Form ref="formData" :model="formData">
        <Row :gutter="30">
          <Col span="6">
            <FormItem prop="input">
              <Input search placeholder="搜索关键词" v-model="formData.busKeyTypeName" />
            </FormItem>
          </Col>
          <Col span="18" class="com-action-btn">
            <Button type="primary" @click="handleSearch()">查询</Button>
            <BtnPlain type="primary" @click="handleReset('formData')">
              <Icon type="md-refresh" />
              <span>重置</span>
            </BtnPlain>
          </Col>
        </Row>
      </Form>
    </div>
    <div class="com-action-table-btn">
      <BtnPlain type="primary" @click="goToSMS">短信模板</BtnPlain>
    </div>
    <Table :columns="columns" :data="listData">
      <template slot-scope="{ row }" slot="smsCode">
        <BtnPlain :type="row.smsCode ? 'primary' : 'error'">{{ row.smsCode ? '是':'否' }}</BtnPlain>
      </template>
      <template slot-scope="{ row }" slot="action">
        <BtnText type="primary" @BtnClick="onEdit(row)">配置</BtnText>
      </template>
    </Table>
    <PageAtion
      v-if="formData.total"
      :total="formData.total"
      :size.sync="formData.size"
      :page.sync="formData.page"
      @pageSizeChange="pageSizeChange"
    />

    <Modal v-model="modalFlag" width="480px" title="配置" :mask-closable="false" @on-visible-change="onVisible">
      <Form ref="modalFormData" :model="modalFormData" :rules="rules">
        <div class="modal-item">
          反馈阶段：
          <span>{{ modalFormData.busKeyTypeName }}</span>
        </div>
        <FormItem prop="timeHour">
          <Select v-model="modalFormData.timeHour" placeholder="请选择反馈时间">
            <Option :value="it.value" v-for="it in timeHourList" :key="it.value">{{ it.label }}</Option>
          </Select>
        </FormItem>
        <div class="modal-item">提醒短信内容</div>
        <FormItem prop="smsCode">
          <Select v-model="modalFormData.smsCode" placeholder="请选择短信模板" @on-change="onChangeSmsCode">
            <Option :value="it.smsCode" v-for="it in smsCodeList" :key="it.smsCode">{{ it.smsTitle }}</Option>
          </Select>
        </FormItem>
        <FormItem prop="smsContext">
          <Input type="textarea" :rows="4" readonly v-model="modalFormData.smsContext" placeholder="短信内容"></Input>
        </FormItem>
      </Form>
      <Row slot="footer" type="flex" justify="center">
        <BtnPlain type="primary" @click="modalFlag = false">取消</BtnPlain>
        <Button type="primary" @click="onConfirm">提交</Button>
      </Row>
    </Modal>
  </div>
</template>

<script>
import { busForewarningSetGetPage, busForewarningSetEditData, smsTemplateGetPage } from '@/api/system.js'
export default {
  name: 'warningTimeSet',
  data () {
    return {
      formData: {
        busKeyTypeName: '',
        page: 1,
        size: 10,
        total: 10,
      },
      columns: [
        {
          title: '反馈阶段',
          key: 'busKeyTypeName',
        },
        {
          title: '预警时限',
          key: 'timeHour',
        },
        {
          title: '是否绑定短信',
          key: 'smsCode',
          slot: 'smsCode',
        },
        {
          title: '操作',
          slot: 'action',
          width: 100,
          align: 'center',
        },
      ],
      listData: [],
      modalFormData: { timeHour: 48, busKeyType: '', smsCode: '', smsContext: '' },
      modalFlag: false,
      rules: {
        smsCode: { required: true, message: '模板标题必填' },
      },
      timeHourList: new Array(19).fill(0).map((_, i) => {
        if (i < 12) {
          return { label: `${i + 1}小时`, value: i + 1 }
        }
        const day = i - 11
        return { label: `${day}天`, value: day * 24 }
      }),
      smsCodeList: []
    }
  },
  created () {
    this.init()
  },
  methods: {
    async init () {
      const request = { ...this.formData }
      const { data, page, size, total } = await busForewarningSetGetPage(request)
      this.listData = data
      this.formData = { ...this.formData, ...{ page, size, total } }

    },
    pageSizeChange (row) {
      this.init()
    },
    handleReset (name) {
      this.$refs[name].resetFields();
    },
    handleSearch(){
      this.formData.page = 1
      this.init()
    },
    goToSMS () {
      this.$router.push({ path: '/SMSTemplate' })
    },
    // 编辑
    async onEdit (row) {
      this.modalFlag = true
      this.modalFormData = { ...this.modalFormData, ...row }

      // 获取短信模板
      if (this.smsCodeList.length) return
      const { data } = await smsTemplateGetPage({})
      this.smsCodeList = data
      this.getSmsContext(row.smsCode)
    },
    // 添加确定
    onConfirm () {
      this.$refs['modalFormData'].validate(async (valid) => {
        if (!valid) return
        const { busForewarningSetId, busKeyType, smsCode, timeHour } = this.modalFormData
        const request = { busForewarningSetId, busKeyType, smsCode, timeHour }
        await busForewarningSetEditData(request)
        this.$Message.success({
          background: true,
          content: '操作成功！'
        });
        this.init()
        this.modalFlag = false
      })
    },
    // 选择短信模板
    onChangeSmsCode (value) {
      this.getSmsContext(value)
    },

    getSmsContext (smsCode = '') {
      const item = this.smsCodeList.find(it => it.smsCode === smsCode) || {}
      this.modalFormData.smsContext = item.smsContext || ''
    },
    // 重置表单状态
    onVisible (val) {
      if (!val) {
        this.$refs['modalFormData'].resetFields();
      }
    },
  }
}
</script>

<style lang='less' scoped>
.mt-20 {
  margin-top: 20px;
}

.modal-item {
  color: #7b8591;
  margin-bottom: 12px;
  > span {
    color: #515a6e;
  }
}
</style>
